// 定义一个常量DISTANCE，表示移动的距离，值为150像素
const DISTANCE = 150;

// 定义一个常量DURATION，表示动画的持续时间，值为1000毫秒（1秒）
const DURATION = 1000;

// 创建一个WeakMap对象cations，用于存储动画对象。使用WeakMap可以防止内存泄漏
const cations = new WeakMap();

// 创建一个IntersectionObserver对象ob，用于监听元素是否进入视口
const ob = new IntersectionObserver(entries => {
    // 遍历所有进入视口的元素
    for(const entry of entries) {
        const { target, isIntersecting } = entry;
        // 如果元素已进入视口
        if(isIntersecting) {
            // 获取元素对应的动画对象
            const animation = cations.get(entry.target);
            // 播放动画
            animation.play();
            // 停止观察该元素
            ob.unobserve(target);
        }
    }
});

// 定义一个Vue组件derDev，包含mounted和unmounted两个钩子函数
const derDev = {
    bind(el){ 
        // 创建一个动画对象，定义动画的初始和结束状态，以及动画的持续时间和缓动函数
        const animation = el.animate([
            {
                transform:`translateY(${DISTANCE}px)`, // 初始状态：元素垂直方向上移动DISTANCE像素
            },
            {
                transform:`translateY(0px)`, // 结束状态：元素垂直方向上移动0像素
            },
            {
                duration:DURATION, // 动画持续时间：DURATION毫秒
                easing:'ease' // 缓动函数：ease
            }
        ]);
        // 暂停动画
        animation.pause();
        // 将动画对象保存到cations中，以元素el为键，动画对象为值
        cations.set(el,animation);
        // 开始观察元素el，当其进入视口时触发IntersectionObserver回调函数
        ob.observe(el);
    },
    unbind(el){
        // 当元素el卸载时，停止观察该元素
        ob.unobserve(el);
    }
}

// 导出自定义的Vue组件derDev，以便在其他地方使用该组件时能够访问其方法、属性和事件等。
export default derDev;